<template>
 <div>
<!-- {{ list }} -->
    <el-row>
        <el-col :span="8" v-for="(item, index) in list" :key="index" style="width: 100%;">
            <el-card :body-style="{ padding: '10px' }" shadow="never" style="border: 0px solid #000;">
                <div class="msg">
                    <img :src="item.thumbnail_pic_s" class="image">
                    <div style="padding: 0px; width: 100%;" >
                        <span class="title">{{ item.title }}</span>
                        <div class="bottom">
                            <span>{{ item.author_name }}</span>
                            <time class="time">{{ item.date }}</time>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
 </div>
</template>

<script>
export default {
  name: 'PublicCom',
  props: {
    list: {
      type: Array,
      require: true
    }
  },
  data () {
    return {

    }
  }

}
</script>

<style lang='scss' scoped>
.msg {
    width: 100%;
    padding-right: 20px;
    display: flex;
    border-bottom: 1px solid #000;
    img {
        margin-bottom: 20px;
        margin-right: 20px;
        width: 161px;
        height: 98px;
    }
    .title {
        display: block;
        font-size: 20px;
        font-weight: 600;
        height: 52px;
    }
    .bottom {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        // .time {
        //     margin-left: 490px;
        // }
    }
}
</style>
